<template>
  <div ref="chartDom" :style="{height:'100%',width:'100%'}" />
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'LineChart',
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartDom)
      this.setOptions(this.chartData)
    },
    setOptions({ xData, values, peaks }) {
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(6, 24, 50, 0.9)',
          borderColor: '#1890ff',
          textStyle: {
            color: '#fff'
          },
          formatter: (params) => {
            const data = params[0]
            return `
              <div style="padding: 8px">
                <div style="margin-bottom: 4px">${data.axisValue}</div>
                <div style="display:flex;align-items:center;">
                  <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#00E1FF;margin-right:6px;"></span>
                  <span>EER：${data.value}</span>
                </div>
              </div>
            `
          }
        },
        grid: {
          top: '15%',
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData,
          axisLine: {
            lineStyle: {
              color: '#1890ff'
            }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: [
          {
            type: 'value',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#1890ff'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(24, 144, 255, 0.1)'
              }
            },
            axisLabel: {
              color: '#fff'
            }
          },
          {
            type: 'value',
            position: 'right',
            name: '-EER',
            nameTextStyle: {
              color: '#fff',
              padding: [0, 0, 10, 0],
              fontSize: 14
            },
            nameLocation: 'end',
            nameGap: 20,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          }
        ],
        series: [
          {
            yAxisIndex: 0,
            data: values,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#00E1FF',
              width: 2
            },
            itemStyle: {
              color: '#00E1FF',
              borderWidth: 2,
              borderColor: '#fff'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(0, 225, 255, 0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(0, 225, 255, 0)'
                }
              ])
            },
            markPoint: {
              data: peaks.map(peak => ({
                coord: peak.coord,
                value: peak.value,
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                  color: peak.type === 'max' ? '#00E1FF' : '#fff'
                },
                label: {
                  color: '#fff',
                  position: 'top'
                }
              }))
            }
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script> 